<template>
	<view>
		<u-navbar title="我的粉丝" back-icon-color="#000" title-color="#000" :title-bold="true" :immersive="true"
			:border-bottom="false" :background="{background:'none'}"></u-navbar>
		<view class="m-head" :style="{paddingTop:navbarHeight +'px'}">
			<image src="../static/fensi-bg.png" mode=""></image>
			<view class="m-head-view">
				<view class="m-head-font1">
					<text>{{total ||0}}</text>
				</view>
				<view class="m-head-font2">
					<text>粉丝数(人)</text>
				</view>
			</view>
		</view>
		
		<view class="m-title">
			<text>粉丝列表</text>
		</view>
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list" :key="index">
				<view class="m-item-image">
					<image v-if="item.image" :src="item.image" mode="aspectFill"></image>
					<image v-else src="@/static/center/center-logo.png" mode="aspectFill"></image>
				</view>
				<view class="m-item-content">
					<view class="m-item-font1">
						<text>{{item.nickname}}</text>
						<view class="m-level">
							<text>{{item.level}}</text>
						</view>
						<!-- <image src="../static/huangjin.png" mode=""></image> -->
					</view>
					<view class="m-item-font2">
						<text>{{item.dtTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="m-empty" v-if="loading == 'noMore' && list.length ==0">
			<image src="../static/fensi-empty.png" mode=""></image>
			<view class="">
				<text>暂无粉丝，快去邀请吧~</text>
			</view>
		</view>
		<uni-load-more :status="loading" v-else></uni-load-more>
		
		<view class="m-bottom-empty safe-area-inset-bottom">
			
		</view>
		<view class="m-bottom safe-area-inset-bottom">
			<view class="m-bottom-btn">
				<text>邀请好友</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				total:0,
				loading:'loading',
				params:{
					page:1,
					pagenum:10,
				},
				list:[],
			}
		},
		computed: {
			// 转换字符数值为真正的数值
			navbarHeight() {
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height + systemInfo.statusBarHeight;
			}
		},
		onReachBottom() {
			if(this.loading == 'more'){
				this.getListFun()
			}
		},
		onLoad() {
			this.getListFun()
		},
		methods: {
			getListFun(){
				this.loading = 'loading'
				let params = this.params
				this.$http.getJson('users_fansRecord',params).then(res=>{
					if(res.code == 1){
						let list = res.data
						let len = list.length
						this.total = res.count || 0
						if(len > 0){
							this.list = this.list.concat(list)
						}
						if(len == params.pagenum){
							this.loading = 'more'
							params.page += 1
						}else{
							this.loading = 'noMore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f6f6f6;
	}

	.m-head {
		position: relative;
		z-index: 1;
		width: 750rpx;
		height: 480rpx;

		image {
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.m-head-view {
			position: relative;
			padding-top: 95rpx;
			height: 100%;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 750rpx;
				height: 40rpx;
				background: #f6f6f6;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
			}

			.m-head-font1 {
				font-size: 80rpx;
				color: #34302D;
				line-height: 106rpx;
				padding-left: 32rpx;
			}

			.m-head-font2 {
				font-size: 24rpx;
				color: #906F4C;
				padding-left: 40rpx;
			}
		}
	}
	
	.m-title{
		font-size: 30rpx;
		color: #222;
		line-height: 40rpx;
		font-weight: 600;
		padding-left: 25rpx;
		padding-bottom: 30rpx;
	}
	
	.m-list{
		padding-left: 25rpx;
		.m-item{
			display: flex;
			align-items: center;
			width: 700rpx;
			height: 154rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 0 25rpx;
			margin-bottom: 20rpx;
			.m-item-image{
				width: 90rpx;
				height: 90rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.m-item-content{
				padding-left: 25rpx;
				.m-item-font1{
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #000;
					image{
						width: 80rpx;
						height: 36rpx;
						margin-left: 15rpx;
					}
				}
				.m-level{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 10rpx;
					height: 36rpx;
					background: linear-gradient( 180deg, #EBEBEB 0%, #D1D1D1 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-size: 20rpx;
					color: #34302D;
					margin-left: 20rpx;
				}
				.m-item-font2{
					font-size: 24rpx;
					color: #9A958F;
					margin-top: 10rpx;
				}
			}
		}
	}
	
	.m-empty{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 60rpx 0 0;
		font-size: 26rpx;
		color: #ADAAA5;
		image{
			width: 320rpx;
			height: 260rpx;
			margin-bottom: 30rpx;
		}
	}
	
	.m-bottom{
		position: fixed;
		bottom: 0;
		z-index: 10;
		width: 750rpx;
		height: 120rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: content-box;
		box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0,0,0,0.06);
		.m-bottom-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 702rpx;
			height: 104rpx;
			background: #D3A358;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.m-bottom-empty{
		width: 100%;
		height: 150rpx;
		box-sizing: content-box;
	}
</style>